<template>
    <view class="coreshop-padding-10 coreshop-margin-10 coreshop-bg-white coreshop-border-radius-trbl-18" style="overflow: hidden;">
        <u-tabs :list="nameList" :current="current" @change="onChange"></u-tabs>
        <view class="coreshop-divider">
            <view class="complete"></view>
        </view>

        <view class="coreshop-text-black" v-for="(newData, indexParent) in coreshopData.parameters.list" :key="indexParent" v-show="newData.isShow">
            <view class="flex-box clear-fix">
                <view class="coreshop-padding-bottom-10 coreshop-bg-main column-value2" v-for="(item,index) in newData.list" :key="index" v-if="newData.column==2">
                    <view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-main coreshop-border-radius-bl-18" @click="goGoodsDetail(item.id)">
                        <image :src="item.image" class="img" mode="widthFix"></image>
                        <view class="coreshop-multiple-line-clamp">
                            <text class="coreshop-font-14">{{item.name}}</text>
                        </view>
                        <view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center coreshop-margin-bottom-5">
                            <view class="coreshop-text-red coreshop-font-weight-bold">
                                <text class="coreshop-font-12">¥</text>
                                <text class="coreshop-font-16">{{item.price}}</text>
                                <span class="coreshop-font-xs  coreshop-text-through coreshop-margin-left-6 coreshop-text-gray" v-if="newData.column==2">{{item.mktprice}}元</span>
                            </view>
                            <view>
                                <text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
                            </view>
                        </view>
                        <view class="coreshop-divider" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
                            <view class="complete"></view>
                        </view>
                        <view class="coreshop-flex coreshop-font-11 coreshop-margin-top-5 coreshop-margin-bottom-5" :class="newData.column>2?'coreshop-flex-direction-column':'coreshop-flex-direction-row'" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
                            <view>
                                {{ pointShowName}}兑换价:
                            </view>
                            <view class="coreshop-text-red">
                                {{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
                            </view>
                        </view>
                        <view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5 coreshop-margin-bottom-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
                            <view>
                                购买赠送:
                            </view>
                            <view class="coreshop-text-red">
                                {{item.points}}{{ pointShowName}}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
       <view class="flex-box3 clear-fix">
                <view class="coreshop-padding-bottom-10 coreshop-bg-main column-value3" v-for="(item,index) in newData.list" :key="index" v-if="newData.column==3">
                    <view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-4 coreshop-padding-right-4 coreshop-bg-main coreshop-border-radius-bl-18" @click="goGoodsDetail(item.id)">
                        <image :src="item.image" class="img" mode="widthFix"></image>
                        <view class="coreshop-multiple-line-clamp">
                            <text class="coreshop-font-14">{{item.name}}</text>
                        </view>
                        <view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center coreshop-margin-bottom-5">
                            <view class="coreshop-text-red coreshop-font-weight-bold">
                                <text class="coreshop-font-12">¥</text>
                                <text class="coreshop-font-16">{{item.price}}</text>
                                <span class="coreshop-font-xs  coreshop-text-through coreshop-margin-left-6 coreshop-text-gray" v-if="newData.column==2">{{item.mktprice}}元</span>
                            </view>
                            <view>
                                <text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
                            </view>
                        </view>
                        <view class="coreshop-divider" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
                            <view class="complete"></view>
                        </view>
                        <view class="coreshop-flex coreshop-font-11 coreshop-margin-top-5 coreshop-margin-bottom-5" :class="newData.column>2?'coreshop-flex-direction-column':'coreshop-flex-direction-row'" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
                            <view>
                                {{ pointShowName}}兑换价:
                            </view>
                            <view class="coreshop-text-red">
                                {{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
                            </view>
                        </view>
                        <view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5 coreshop-margin-bottom-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
                            <view>
                                购买赠送:
                            </view>
                            <view class="coreshop-text-red">
                                {{item.points}}{{ pointShowName}}
                            </view>
                        </view>
                    </view>
                </view>
            </view>


            <view class="coreshop-text-black" v-for="(item, index) in newData.list" :key="index" v-if="newData.column==1">
                <view class="coreshop-flex coreshop-justify-start coreshop-padding-top-10 coreshop-padding-bottom-10" v-if="newData.list.length" @click="goGoodsDetail(item.id)">
                    <view>
                        <u--image :src="item.image" mode="widthFix" width="130px" height="130px" radius="8"></u--image>
                    </view>
                    <view class="coreshop-flex coreshop-flex-direction  coreshop-padding-left-10">
                        <view class="coreshop-font-14 u-line-2 coreshop-text-black">{{ item.name }}</view>
                        <view class="coreshop-font-11 coreshop-padding-top-5 coreshop-padding-bottom-3 u-line-2 coreshop-text-brown">{{ item.brief }}</view>
                        <view class="coreshop-flex coreshop-align-center coreshop-padding-top-10  coreshop-padding-bottom-10">
                            <view class="coreshop-font-11 coreshop-bg-orange coreshop-padding-2 coreshop-border-radius-4 coreshop-margin-right-10">已售{{item.buyCount}}{{item.unit}}</view>
                            <view class="coreshop-font-11 coreshop-bg-olive coreshop-padding-2 coreshop-border-radius-4">{{item.viewCount}}人访问</view>
                        </view>
                        <view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-bottom-5" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
                            <view>
                                {{ pointShowName}}兑换价:
                            </view>
                            <view class="coreshop-text-red">
                                {{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
                            </view>
                        </view>
                        <view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
                            <view>
                                购买赠送:
                            </view>
                            <view class="coreshop-text-red">
                                {{item.points}}{{ pointShowName}}
                            </view>
                        </view>
                        <view class="coreshop-flex coreshop-justify-between  coreshop-flex-direction-row coreshop-align-center">
                            <view class="coreshop-flex coreshop-align-center">
                                <view class="coreshop-font-14 coreshop-text-red">￥{{ item.price  }}</view>
                                <view class="coreshop-font-12 coreshop-text-gray coreshop-text-through">￥{{ item.mktprice }}</view>
                            </view>
                            <view class="coreshop-buy-btn">立即购</view>
                        </view>
                    </view>
                </view>
                <view class="order-none" v-else>
                    <u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/order.png'" icon-size="150" text="暂无" mode="list"></u-empty>
                </view>
            </view>
        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                current: 0,
                nameList: [],
            };
        },
        name: "coreshopGoodTabBar",
        props: {
            coreshopData: {
                // type: Array,
                required: true,
            }
        },
        mounted() {
            var _this = this;
            for (var i = 0; i < this.coreshopData.parameters.list.length; i++) {
                let item = {
                    name: this.coreshopData.parameters.list[i].title
                }
                this.nameList.push(item);
                if (_this.current == i) {
                    this.coreshopData.parameters.list[i].isShow = true;
                } else {
                    this.coreshopData.parameters.list[i].isShow = false;
                }
            }
        },
        computed: {
            pointSwitch() { return this.$store.state.config.pointSwitch },
            pointShowExchangePrice() { return this.$store.state.config.pointShowExchangePrice },
            pointDiscountedProportion() { return this.$store.state.config.pointDiscountedProportion },
            pointExchangeModel() { return this.$store.state.config.pointExchangeModel },
            pointShowName() { return this.$store.state.config.pointShowName },
            pointGetModel() { return this.$store.state.config.pointGetModel },
            pointShowPoint() { return this.$store.state.config.pointShowPoint },
        },
        methods: {
            onChange(item) {
                var _this = this;
                this.current = item.index;
                for (var i = 0; i < _this.coreshopData.parameters.list.length; i++) {
                    if (_this.current == i) {
                        _this.coreshopData.parameters.list[i].isShow = true;
                    } else {
                        _this.coreshopData.parameters.list[i].isShow = false;
                    }
                }
            }
        },
    }
</script>

<style scoped lang="scss">
    .flex-box { column-count: 2; column-gap: 8px;
        .column-value2 { width: 100%; break-inside: avoid; color: #333333 !important; margin-bottom: 8px; }
    }
    .flex-box3 { column-count: 3; column-gap: 8px;
        .column-value3 { width: 100%; break-inside: avoid; color: #333333 !important; margin-bottom: 5px; }
    }
    .img { width: 100%; }
    .clear-fix::after { content: ''; display: block; height: 0; clear: both; }
    .clear-fix { zoom: 1; }
</style>
